<div class="sidebar-content card d-none d-lg-block">
    <div class="card-body">
        <div class="category-title pb-1">
            <h6>Card example</h6>
        </div>
        <!-- Card sample -->
        <div class="text-center">
            <img class="card-img-top mb-1 img-fluid" data-src="holder.js/100px180/" src="../../../app-assets/images/portfolio/portfolio-1.jpg" alt="Card image cap">
        </div>
        <h4 class="card-title">Card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Button</a>
        <!-- /Card sample -->
        <hr>
        <!-- Striped Progress sample -->
        <div class="category-title pb-1">
            <h6>Progress example</h6>
        </div>
        <div>
            <div class="progress progress-sm mt-1 mb-0">
                <div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="progress progress-sm mt-1 mb-0">
                <div class="progress-bar bg-danger" role="progressbar" style="width: 60%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="progress progress-sm mt-1 mb-0">
                <div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <!-- /Striped Progress sample -->
        <hr>
        <!-- Media sample -->
        <div class="category-title pb-1">
            <h6>Media example</h6>
        </div>
        <div class="media">
            <a class="media-left pr-1" href="#">
                <img class="media-object" src="../../../app-assets/images/portrait/small/avatar-s-3.png" alt="Generic placeholder image" style="width: 64px;height: 64px;" />
            </a>
            <div class="media-body">
                <h4 class="media-heading">Cookie candy</h4> Cookie candy dragée marzipan pie pudding.
            </div>
        </div>
        <!-- /Media sample -->
        <hr>
        <!-- Form sample -->
        <div class="sidebar-category">
            <div class="category-title pb-1">
                <h6>Form example</h6>
            </div>
            <form action="#" class="category-content">
                <div class="form-group">
                    <label>Your name:</label>
                    <input type="text" class="form-control" placeholder="Username">
                </div>
                <div class="form-group">
                    <label>Your password:</label>
                    <input type="password" class="form-control" placeholder="Password">
                </div>
                <div class="form-group">
                    <label>Your message:</label>
                    <textarea rows="3" cols="3" class="form-control" placeholder="Default textarea"></textarea>
                </div>
                <div class="row">
                    <div class="col-6">
                        <button type="reset" class="btn btn-danger btn-block">Reset</button>
                    </div>
                    <div class="col-6">
                        <button type="submit" class="btn btn-info btn-block">Submit</button>
                    </div>
                </div>
            </form>
        </div>
        <!-- /form sample -->
    </div>
</div>
